<template>
  <div>
    <el-row>
      <el-col :span="15">
        <!--查询按钮区域-->
        <el-form :inline="true" ref="queryForm" :model="queryMap" class="demo-form-inline">
          <el-form-item label="用户姓名" prop="uname">
            <el-input v-model="queryMap.uname" placeholder="用户姓名"></el-input>
          </el-form-item>
          <el-form-item v-if="permit" label="用户类别" prop="type">
            <el-select v-model="queryMap.type" placeholder="职位" clearable filterable>
              <el-option label="员工" value="1"></el-option>
              <el-option label="管理员" value="2"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="query">查询</el-button>
            <el-button type="reset" @click="resetForm">重置</el-button>
          </el-form-item>
        </el-form>
      </el-col>
      <el-col :span="4">
        &nbsp;
      </el-col>
      <el-col :span="5">
        <!--增删改按钮-->
        <el-button-group>
          <el-button type="primary" icon="el-icon-plus" @click="openAddDialog()">新增</el-button>
          <el-button type="primary" icon="el-icon-edit" @click="openEditDialog(key)">编辑</el-button>
          <el-button type="primary" icon="el-icon-delete" @click="deleteData(key)">删除</el-button>
        </el-button-group>
      </el-col>
    </el-row>

    <!--用户信息表格-->
    <el-table
      :data="dataList"
      border
      stripe
      :height="height"
      style="width: 100%"
      @selection-change="selectChange"
      :row-class-name="tableRowClassName"
    >
      <!--序号列-->
      <el-table-column
        type="index"
        align="center"
        label="序号"
        width="55"
        :index="indexMethod">
      </el-table-column>
      <!--全选框-->
      <el-table-column
        type="selection"
        align="center"
        width="55">
      </el-table-column>
      <el-table-column
        prop="userid"
        align="center"
        label="编号"
        width="180">
      </el-table-column>
      <el-table-column
        prop="uname"
        align="center"
        label="用户姓名"
        width="180">
      </el-table-column>
      <el-table-column
        prop="account"
        align="center"
        label="账号">
      </el-table-column>
      <el-table-column
        prop="permission"
        align="center"
        label="权限等级">
      </el-table-column>
      <el-table-column
        align="center"
        label="头像"
        width="200"
      >
        <template slot-scope="scope">
          <img :src="scope.row.headshot"
               style="width: 35px; height: 35px; border-radius: 50%" alt="">
        </template>
      </el-table-column>
      <el-table-column label="操作" align="center">
        <template slot-scope="scope">
          <el-button class="el-button--primary" @click="editPwd(scope.$index, scope.row)">修改密码</el-button>
        </template>
      </el-table-column>
    </el-table>

    <!--分页组件-->
    <el-pagination
      background
      class="pagination"
      layout="prev, pager, next, sizes, total"
      :total="total"
      :page-size="queryMap.limit"
      :current-page="queryMap.page"
      :page-sizes="limits"
      @current-change="handleCurrentChange"
      @size-change="handleSizeChange">
    </el-pagination>

    <user-model ref="model" :formTitle="formTitle"></user-model>
  </div>
</template>

<script>
    import UserModel from '@/components/UserModel'
    import tableMixin from '@/mixins/tableMixin'

    export default {
        name: "UserList",
        components: {
            UserModel
        },
        mixins: [tableMixin],
        data() {
            return {
                //后台接口路径
                url: {
                    getDataList: 'getUserByPage',
                    getOne: 'getUserByUserid',
                    delBatch: 'delUser'
                },
                //主键
                key: 'userid',
                queryMap: {
                    limit: 7
                },
                limits: [7,10,15,20],
                permit: false
            }
        },
        methods: {
            /**
             * 修改密码
             */
            editPwd(index, data) {
                //提示管理员输入新密码
                this.$prompt('请输入新密码', '修改密码', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    inputPattern: /^[\w@#$]{6,12}$/,
                    inputErrorMessage: '密码长度须为6~12位'
                }).then(({ value }) => {
                    const param = {
                        userid: data.userid,
                        pwd: value
                    }
                    this.$http.post("editPassword", param).then(res => {
                        this.$message({
                            type: 'success',
                            message: '修改成功，新密码为: ' + value
                        });
                    }).catch(() => {
                        this.$message("服务器错误")
                    })
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '取消修改密码'
                    });
                });
            },
            /**
             * 重写方法：打开编辑弹窗
             */
            openEditDialog(key) {
                //判断用户是否只勾选了一条数据
                if (this.checkedData.length !== 1) {
                    this.$message.warning("请选择一条记录进行编辑")
                    return
                }
                //获取选中记录的主键
                let num = this.checkedData[0][key]
                const params = {}
                params[key] = num
                this.$http.get(this.url.getOne, {
                    params: params
                }).then(res => {
                    this.$refs.model.openEditDialog()
                    this.$refs.model.modelForm = res.data
                    this.$refs.model.fileList = [{
                        name: "temp",
                        url: res.data.headshot
                    }]
                })
            }
        },
        created() {
            const permission = this.$store.state.permission
            if (permission === 4) {
                this.permit = true
            } else {
                this.queryMap.type = 1
                this.getDataList()
            }
        }
    }
</script>

<style scoped>

</style>